<template>
  <div class="page">
    <nav-top title='选择医生'></nav-top>
    <div class="header-sub bb">
    <div class="select-wrap">
        <i class="icon-area"></i>
      <span class="select">
        地区</span>
    </div>
      <search-input></search-input>
    </div>
    <page-content>
    <div class="list"  ref='list'>
      <div class="list-wrap" ref='listWrap'>
        <list-item v-for="(item,index) in listData" :data="item" :key="index" v-if="listData"></list-item>
        <div class="row" v-else>
          暂无数据
        </div>
      </div>
    </div>
    </page-content>
  </div>
</template>

<script>
import navTop from '@c/header/navTop'
import pageContent from '@c/pagecontent'
import searchInput from '@c/searchBar'
import listItem from './_docter-list-item'
export default {
  name: 'docterChoose',
  components:{
    navTop,
    pageContent,
    searchInput,
    listItem
  },
  // props:,
  data () {
    return {
      listData:[
        {
          docter:'朱锦春',
          job:'主任医师',
          hospital:'中山市人民医院 儿科'
        },
        {
          docter:'朱锦春',
          job:'主任医师',
          hospital:'中山市人民医院 儿科'
        },
        {
          docter:'朱锦春',
          job:'主任医师',
          hospital:'中山市人民医院 儿科'
        },
        {
          docter:'朱锦春',
          job:'主任医师',
          hospital:'中山市人民医院 儿科'
        },
        {
          docter:'朱锦春',
          job:'主任医师',
          hospital:'中山市人民医院 儿科'
        },
        {
          docter:'朱锦春',
          job:'主任医师',
          hospital:'中山市人民医院 儿科'
        },
        {
          docter:'朱锦春',
          job:'主任医师',
          hospital:'中山市人民医院 儿科'
        },
        {
          docter:'朱锦春',
          job:'主任医师',
          hospital:'中山市人民医院 儿科'
        },
        {
          docter:'朱锦春',
          job:'主任医师',
          hospital:'中山市人民医院 儿科'
        },
        {
          docter:'朱锦春',
          job:'主任医师',
          hospital:'中山市人民医院 儿科'
        },
        {
          docter:'朱锦春',
          job:'主任医师',
          hospital:'中山市人民医院 儿科'
        },
        {
          docter:'朱锦春',
          job:'主任医师',
          hospital:'中山市人民医院 儿科'
        },
        {
          docter:'朱锦春',
          job:'主任医师',
          hospital:'中山市人民医院 儿科'
        },
        {
          docter:'朱锦春',
          job:'主任医师',
          hospital:'中山市人民医院 儿科'
        },
        {
          docter:'朱锦春',
          job:'主任医师',
          hospital:'中山市人民医院 儿科'
        },
        {
          docter:'朱锦春',
          job:'主任医师',
          hospital:'中山市人民医院 儿科'
        },
        {
          docter:'朱锦春',
          job:'主任医师',
          hospital:'中山市人民医院 儿科'
        },
        {
          docter:'朱锦春',
          job:'主任医师',
          hospital:'中山市人民医院 儿科'
        },
        {
          docter:'朱锦春',
          job:'主任医师',
          hospital:'中山市人民医院 儿科'
        },
        {
          docter:'朱锦春',
          job:'主任医师',
          hospital:'中山市人民医院 儿科'
        }
      ]
      }
  },
  computed:{

  },
  methods:{
    listNearBottom(){
      let _el_list = this.$refs.listWrap,
        _el_page = this.$refs.list
        return _el_list.scrollHeight-_el_page.scrollTop-_el_page.offsetHeight< 100
    }
  },
  mounted(){
    this.$refs.list.addEventListener('scroll',ev => 
    {
      if(this.listNearBottom()){
        this.listData.push(
                  {
          docter:'朱锦春',
          job:'主任医师',
          hospital:'中山市人民医院 儿科'
        }
        )
      }
    }
    )
  }
}
</script>
<style lang='scss'>
  .icon-area::before{
    content:' ';
    display: inline-block;
    background-image: url(../../../static/search_icon_map_nor.png);
    background-repeat: no-repeat;
    background-size: contain;
    height: 30px;
    width:30px;
  }
.select{
  font-size:30px; /*px*/
  color:#fb4700;
}
</style>